import { useState } from 'react'
import { Dropdown, Flex, Menu } from 'antd'
import { DownOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { useMessageList } from '../../hooks/useMessageList'
import { useDispatch } from 'react-redux'
import { changeSelectedModel } from '../../store/messageSlice'
interface SelectModelProps {
  isMobile?: boolean
  onToggleMenu?: () => void
}

export default function SelectModel(props: SelectModelProps) {
  const { selectedModel: defaultModel } = useMessageList()
  const [selectedModel, setSelectedModel] = useState(defaultModel)
  const dispatch = useDispatch()
  const { isMobile, onToggleMenu } = props

  // 模型配置项
  const modelOptions = [
    { key: 'qwen-max', label: '通义千问(Qwen-max模型)' },
    { key: 'qwq-32b', label: '通义千问-QwQ-Plus 深度推理模型' },
    { key: 'deepseek-chat', label: 'DeepSeek' }
  ]

  const handleMenuClick = (e: { key: string }): void => {
    setSelectedModel(e.key)
    dispatch(changeSelectedModel(e.key))
  }

  const menu = (
    <Menu onClick={handleMenuClick} selectedKeys={[selectedModel]}>
      {modelOptions.map(model => (
        <Menu.Item key={model.key}>{model.label}</Menu.Item>
      ))}
    </Menu>
  )

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: '15px'
      }}
    >
      <Flex align="center" gap={15}>
        {isMobile && (
          <div
            style={{
              fontSize: '18px'
            }}
          >
            <MenuUnfoldOutlined onClick={onToggleMenu} />
          </div>
        )}

        <Dropdown overlay={menu} trigger={['click']}>
          <Flex
            align="center"
            style={{
              display: 'flex',
              alignItems: 'center',
              cursor: 'pointer',
              padding: '5px 15px',
              borderRadius: '4px',
              backgroundColor: '#f5f5f5'
            }}
          >
            <div style={{ marginRight: '8px' }}>
              {modelOptions.find(model => model.key === selectedModel)?.label}
            </div>
            <DownOutlined />
          </Flex>
        </Dropdown>
      </Flex>
    </div>
  )
}
